<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <span class="bebas modal-title" style="color: #657B83;font-size: 19px">
        <i class="fa fa-cloud-upload"></i> &nbsp;Bulk Import File Upload</span>
</div>

<div class="modal-body">
    <div class="alert alert-info" style="padding: 8px">
        <i style="font-size:60px; float: left;padding-right:10px; color: #3a87ad" class="fa fa-info-circle"></i>
        <span class="font-90em">Supported file formats for bulk upload are:
            <ul style="margin-left: 62px">
                <li><b>CSV file</b>
                    (<a class="cursor_pointer" ng-click="downloadCSVTemplate()"><i class="fa fa-download"></i> Download
                        template</a>)
                </li>
                <li><b>Zip Archive with sequences</b> (must contain exactly 1 CSV file)</li>
                <li><b>SBOL XML</b></li>
            </ul>
        </span>
    </div>

    <div ng-if="uploadError" class="alert alert-danger">
        <i style="font-size:45px; float:left; padding-right: 10px" class="fa fa-exclamation-triangle"></i>
        <strong class="font-90em">{{uploadError.message}}</strong>
        <br>
        <span ng-if="!uploadError.headers.length" class="font-85em" style="margin-left: 25px">{{uploadError.userMessage}}</span>
        <span ng-if="uploadError.headers.length" class="font-85em" style="margin-left: 25px">
            The following fields are required and left blank or have invalid values:
            <ul style="margin-left: 62px">
                <li ng-repeat="header in uploadError.headers">{{header.entryField}}</li>
            </ul>
        </span>
    </div>

    <input ng-if="!processing && !modalClose && !uploadError" type="file" nv-file-select="" uploader="importUploader"
           class="font-90em">

    <div style="height: 12px; width: 100%" ng-if="!processing && !modalClose">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': importUploader.progress + '%' }"></div>
    </div>

    <div class="alert alert-info" ng-if="processing">
        <i class="fa fa-spin fa-gear"></i> Processing upload. This may take several minutes ...
    </div>
</div>

<div class="modal-footer">
    <button class="btn btn-default btn-sm" ng-click="cancel()">{{modalClose || 'Cancel'}}</button>
    <button ng-if="!uploadError && !modalClose && !processing" type="button" ng-click="importUploader.uploadAll()"
            class="btn btn-primary btn-sm" ng-disabled="!importUploader.getNotUploadedItems().length">Upload File
    </button>
    <button ng-if="uploadError" type="button" ng-click="retryUpload()" class="btn btn-primary btn-sm">Retry</button>
</div>
